<template>
  <div id="tepl">
    <!-- mint-ui中的swipe组件实现图片轮播 -->
      <mt-swipe :auto="4000">
  <mt-swipe-item v-for="lunbo in list" :key="lunbo.img">
      <img :src="lunbo.img" alt="">
  </mt-swipe-item>
</mt-swipe>
<!-- mui中的9宫格实现导航区展示 -->
<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/goods/goodslist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/feedme">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/video">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/contactus">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		        </ul> 
		</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  created(){
      //当页面中的data和methods对象都创建完毕以后，就会自动调用created
      this.getimgs();
  },
  methods:{
      getimgs(){
          //实现轮播组件中的数据请求
          var url = '../statics/api/lunbo.json';
          //确定url
          //调用$http.get()
          this.$http.get(url).then(function(response){
              var data = response.body
              //错误处理
              if(data.status != 0){
                  alert(data.message)
                  return;//阻断错误代码继续运行
              }
              this.list = data.message;
          })
      }
  },
};
</script>
<style scoped>
    img{
        width: 100%;
    }
    .mint-swipe{
    height: 300px;
}
    .mint-swipe-item{
    /* background: red; */
    width: 100%;
    height: 300px;
}
.mui-grid-view.mui-grid-9{
  border-top:0;
  border-left:0;
  background-color: #fff;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border-right: 0;
  border-bottom: 0;
}
.mui-icon-home:before,.mui-icon-email:before,
.mui-icon-chatbubble:before,.mui-icon-location:before,
.mui-icon-search:before,.mui-icon-phone:before{
  content:'';
  background: url(../../../statics/imgs/1.png);
  width: 50px;
  height:50px;
  display: inline-block;
  background-repeat: round;
}
.mui-icon-email:before{
  background-image: url(../../../statics/imgs/6.png);
}
.mui-icon-chatbubble:before{
    background-image: url(../../../statics/imgs/4.png);

}
.mui-icon-location:before{
    background-image: url(../../../statics/imgs/3.png);

}
.mui-icon-search:before{
    background-image: url(../../../statics/imgs/5.png);

}
.mui-icon-phone:before{
    background-image: url(../../../statics/imgs/2.png);

}
</style>


